import React, { useState, useEffect } from 'react';
import { SearchOutline, LeftOutline } from 'antd-mobile-icons';
import { useNavigate } from "react-router-dom";
import './SearchHd.min.css'
function SearchHd({ data }) {
   const [pla, setPla] = useState([])
   let navigate = useNavigate();

   {
      data &&
      setTimeout(() => {
         // console.log(data[0].name);
         setPla(data[0].name)
      })
   }

   // const [inpval, setInpval] = useState("")

   let keyEnter = (e) => {
      if (e.nativeEvent.keyCode === 13) {
         // console.log('enter', e.target.value);
         // setInpval(e.target.value);
         // console.log('inpval', inpval);
         if(e.target.value != ""){
            navigate('/Success?title='+e.target.value)
         }else{
            navigate('/Success?title='+data[0].name)
         }  
      }
   }


   return  (
      <div className="search">
         <div className='hd_nav'>
            <div className="nav_in">
               <input className='input' type="text"
                  //onKeyUp={(e) =>  setInpval(e.target.value)}
                  onKeyUp={(e) => keyEnter(e)}
                  placeholder={pla}
               />
               <div className="in_icon">
                  <SearchOutline fontSize={22} color="#999" />
               </div>
            </div>
            <span className="nav_txt" onClick={()=>window.history.back(-1)}>取消</span>
         </div>
      </div>
   );
}

export default SearchHd;